﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>两个ListBox之间选择移动项</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    
       

</head>
<body>
    <h1>两个ListBox之间选择移动项 </h1>      

    <input type="button" value="Save" onclick="saveData()" style="width:55px;"/>
    <table >
        <tr>
            <td >
                <div id="listbox1" class="mini-listbox" style="width:150px;height:150px;"
                    textField="text" valueField="id" showCheckBox="true" multiSelect="true"
                    url="../data/countrys.txt">
                
                </div>
            </td>
            <td style="width:120px;text-align:center;">
                <input type="button" value=">" onclick="add()" style="width:40px;"/><br />
                <input type="button" value=">>" onclick="addAll()" style="width:40px;"/><br />
                <input type="button" value="&lt;&lt;" onclick="removeAll()" style="width:40px;"/><br />
                <input type="button" value="&lt;" onclick="removes()" style="width:40px;"/><br />

            </td>
            <td>
                <div id="listbox2" class="mini-listbox" style="width:250px;height:150px;"                     
                     showCheckBox="true" multiSelect="true" >     
                    <div property="columns">
                        <div header="ID" field="id"></div>
                        <div header="国家" field="text"></div>
                    </div>
                </div>
            </td>
            <td style="width:50px;text-align:center;vertical-align:bottom">
                <input type="button" value="Up" onclick="upItem()" style="width:55px;"/>
                <input type="button" value="Down" onclick="downItem()" style="width:55px;"/>

            </td>
        </tr>
    
    </table>    
    
    <script type="text/javascript">
        mini.parse();
        var listbox1 = mini.get("listbox1");
        var listbox2 = mini.get("listbox2");

        function add() {
            var items = listbox1.getSelecteds();
            listbox1.removeItems(items);
            listbox2.addItems(items);
        }
        function addAll() {        
            var items = listbox1.getData();
            listbox1.removeItems(items);
            listbox2.addItems(items);
        }
        function removes() {
            var items = listbox2.getSelecteds();
            listbox2.removeItems(items);
            listbox1.addItems(items);
        }
        function removeAll() {
            var items = listbox2.getData();
            listbox2.removeItems(items);
            listbox1.addItems(items);
        }
        function upItem() {
            var items = listbox2.getSelecteds();
            for (var i = 0, l = items.length; i < l; i++) {
                var item = items[i];
                var index = listbox2.indexOf(item);
                listbox2.moveItem(item, index-1);
            }
        }
        function downItem() {            
            var items = listbox2.getSelecteds();            
            for (var i = items.length-1; i >=0; i--) {
                var item = items[i];
                var index = listbox2.indexOf(item);
                listbox2.moveItem(item, index + 1);
            }
        }
        function saveData() {
            var data = listbox2.getData();
            var json = mini.encode(data);
            alert(json);
        }
    </script>

    <div class="description">
        <h3>Description</h3>
        <p>演示在两个ListBox之间，移动数据。
        </p>
    </div>
</body>
</html>